/**
 * Created by Feng on 2017/2/24.
 */

//获取上下文，宽高，半径
var dom = document.getElementById("clock");
var ctx = dom.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
//比例（放大缩小不影响美观）
var rem = width / 300;

function drawBackground() {
    ctx.save();//后加上的
    //外圆
    ctx.translate(r,r);
    ctx.beginPath();
    ctx.lineWidth = 10 * rem;
    ctx.arc(0,0,r - ctx.lineWidth/2,0,2*Math.PI,false);//画圆
    ctx.stroke();
    //时钟上数字
    var hourNumber = [3,4,5,6,7,8,9,10,11,12,1,2];
    ctx.font = 18 * rem +"px Arial";
    //对齐方式
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    //遍历数组
    hourNumber.forEach(function(number,i){
        var rad = 2 * Math.PI / 12*i;//弧度
        var x = Math.cos(rad)*(r - 30* rem);
        var y = Math.sin(rad)*(r - 30* rem);
        ctx.fillText(number,x,y);//填充文本
    });
    //绘制60个针格
    for (var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60*i;//弧度
        var x = Math.cos(rad)*(r - 18* rem);
        var y = Math.sin(rad)*(r - 18* rem);
        ctx.beginPath();
        if (i%5==0) {//是小时显示黑色
            ctx.fillStyle = "#000";
            ctx.arc(x,y,2* rem,0,2*Math.PI,false);//画圆
        }else{
            ctx.fillStyle = "#ccc";
            ctx.arc(x,y,1* rem,0,2*Math.PI,false);//画圆
        }
        ctx.fill();
    };
}

//画时针
function drawHour(hour,minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12*hour;
    var sum = 2 * Math.PI / 12 / 60 *minute;
    ctx.rotate(rad + sum);
    //设置宽度，顶部样式
    ctx.lineWidth = 6* rem;
    ctx.lineCap = "round";
    ctx.moveTo(0,10* rem);//原点移到中心点下面10
    ctx.lineTo(0,-r/2);//时针长度（起点到终点距离）
    ctx.stroke();
    ctx.restore();
}
//画分针
function drawMinutes(minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60*minute;
    ctx.rotate(rad);
    //设置宽度，顶部样式
    ctx.lineWidth = 3* rem;
    ctx.lineCap = "round";
    ctx.moveTo(0,10);//原点移到中心点下面10
    ctx.lineTo(0,-r + 40 * rem);//时针长度（起点到终点距离）
    ctx.stroke();
    ctx.restore();
}
//秒针
function draweConds(second) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60*second;
    ctx.rotate(rad);
    ctx.fillStyle = "#c14543";
    //设置宽度，顶部样式
    ctx.moveTo(-2* rem,20* rem);//原点移到中心点下面10
    ctx.lineTo(2* rem,20* rem);//时针长度（起点到终点距离）
    ctx.lineTo(1,-r+18* rem);
    ctx.lineTo(-1,-r+18* rem);
    ctx.fill();
    ctx.restore();
}
//中心的圆
function drawDot() {
    ctx.beginPath();
    ctx.fillStyle = "#fff";
    ctx.arc(0,0,3* rem,0,2*Math.PI,false);
    ctx.fill();
}

//动效
function doaw() {
    ctx.clearRect(0,0,width,height);
    //获取当前时间
    var data = new Date();
    var hour = data.getHours();
    var minute = data.getMinutes();
    var second = data.getSeconds();

    drawBackground();
    drawHour(hour,minute);
    drawMinutes(minute);
    draweConds(second);
    drawDot();
    ctx.restore();
}
doaw();
//计时器
setInterval(doaw,1000);